<template>
  <div>
    <!--面包屑导航-->
    <div class="breadcrumb">
      <div class="container">
        <h2>
          <router-link to="/">首页</router-link>&gt;<router-link to="product"
            >产品中心</router-link
          >
        </h2>
      </div>
    </div>
    <!--页面主体-->
    <div class="main container" v-if="data">
      <div class="pl_header">
        <router-link to="/product/1" :class="{ cur: type == 1 }"
          >净美仕净化器</router-link
        ><router-link to="/product/2" :class="{ cur: type == 2 }"
          >净美仕滤网</router-link
        >
      </div>
      <!-- 产品列表-->
      <ul class="product_list clearfloat">
        <!-- :data 才是js代码 -->
        <product-item :data="item" v-for="(item, index) in data.data" :key="index" />
      </ul>
      <!-- 分页导航-->
      <div class="pages">
        <!--<a href="">上一页</a>-->
        <!--<a href="">1</a>-->
        <!--<a href="" class="cur">2</a>-->
        <!--<a href="">3</a>-->
        <!--<a href="">4</a>-->
        <!--<a href="">5</a>-->
        <!--<a href="">下一页</a>-->
      </div>
    </div>
  </div>
</template>

<script>
import ProductItem from "../components/ProductItem.vue";
export default {
  components: { ProductItem },
  data() {
    return {
      data: null,
    };
  },
  props: {
    // 属性的详细配置：属性名：{配置项}
    type: {
      default: 1, //如果路由传参没传值，默认为1
    },
  },
  mounted() {
    this.getData(1); //表示初始化默认传1
  },
  methods: {
    getData(pno) {
      let url = `product_select.php?type=${this.type}&pageNum=${pno}`;
      this.axios.get(url).then((res) => {
        console.log(res);
        this.data = res.data;
      });
    },
  },
  // 利用监听路由发生变化时，再次发送请求
  watch: {
    // 路由参数：$route
    $route(newValue, oldValue) {
      this.getData(1);
    },
  },
};
</script>

<style lang="scss" scoped></style>
